<template>
  <div style="padding: 10px">
    <d-form
      ref="dFormRef"
      :formConfig="formConfig"
      :formItemConfig="formItemConfig"
      v-model="formData"></d-form>
    {{ formData }}
    <div style="margin-top: 20px">
      <d-button type="primary" @click="submit">提交</d-button>
      <d-button type="warning" @click="reset">重置</d-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, toRef, toRefs } from 'vue'

  // 模拟缓存字典数据
  const options = {
    fieldName: [
      { name: 'dict选项1', id: '1' },
      { name: 'dict选项2', id: '2' },
      { name: 'dict选项3', id: '3' }
    ]
  }
  localStorage.setItem('dictName', JSON.stringify(options))

  // mock下拉表格数据
  const allData = [
    { date: '2016-05-0111', name: '测试1', id: 1 },
    { date: '2016-05-02', name: '测试2', id: 2 },
    { date: '2016-05-03', name: '测试3', id: 3 },
    { date: '2016-05-04', name: '测试4', id: 4 },
    { date: '2016-05-05', name: '测试5', id: 5 },
    { date: '2016-05-06', name: '测试6', id: 6 },
    { date: '2016-05-07', name: '测试7', id: 7 },
    { date: '2016-05-08', name: '测试8', id: 8 },
    { date: '2016-05-09', name: '测试9', id: 9 },
    { date: '2016-05-10', name: '测试10', id: 10 },
    { date: '2016-05-11', name: '测试11', id: 11 },
    { date: '2016-05-01', name: '测试12', id: 12 },
    { date: '2016-05-02', name: '测试13', id: 13 },
    { date: '2016-05-03', name: '测试14', id: 14 },
    { date: '2016-05-04', name: '测试15', id: 15 },
    { date: '2016-05-05', name: '测试16', id: 16 },
    { date: '2016-05-06', name: '测试17', id: 17 },
    { date: '2016-05-07', name: '测试18', id: 18 },
    { date: '2016-05-08', name: '测试19', id: 19 }
  ]
  const pagination = ref({
    currentPage: 1,
    pageSize: 10,
    total: allData.length
  })
  const tableData: any = ref([])

  const formData = ref({
    default: '普通文本',
    checkbox: [],
    selectTree: '',
    selectTable: '',
    selectTableText: ''
  })
  const formConfig = ref({
    class: 'flex',
    disabled: false,
    labelWidth: '150px',
    rules: {
      default: [{ required: true, message: '请输入内容', trigger: 'blur' }],
      checkbox: [{ required: true, message: '请选择', trigger: 'change' }],
      date1: [{ required: true, message: '请选择', trigger: 'change' }],
      select1: [{ required: true, message: '请选择', trigger: 'change' }],
      select2: [{ required: true, message: '请选择', trigger: 'change' }],
      selectTree: [{ required: true, message: '请选择', trigger: 'change' }],
      selectTable: [{ required: true, message: '请输入', trigger: 'blur' }]
    }
  })
  // 表单配置
  const formItemConfig = ref([
    { cType: 'text', label: '文字类型', prop: 'default', class: 'w-33' },
    { cType: 'input', label: '普通输入', prop: 'input', class: 'w-33' },
    { cType: 'input', label: '最小值10', prop: 'min', config: { min: 10 }, class: 'w-33' },
    { cType: 'input', label: '最大值10', prop: 'max', config: { max: 10 }, class: 'w-33' },
    {
      cType: 'input',
      label: '金额',
      prop: 'money',
      config: {
        format: { type: 'money', decimal: 2 }
      },
      class: 'w-33'
    },
    {
      cType: 'input',
      label: '小数位',
      prop: 'decimal',
      config: { format: { decimal: 4 } },
      class: 'w-33'
    },
    {
      cType: 'input',
      label: '值/100存储(%)',
      prop: 'percent',
      config: { format: { scale: 0.01 } },
      class: 'w-33'
    },
    {
      cType: 'input',
      label: '值*10000存储(万元)',
      prop: 'scale',
      config: { format: { scale: 10000 } }
    },
    {
      cType: 'input',
      label: 'textarea',
      prop: 'textarea',
      config: { type: 'textarea', maxlength: 330 }
    },
    {
      cType: 'radio',
      label: '单选框',
      prop: 'radio',
      config: {
        props: { label: 'lable' },
        options: [
          { lable: '选项1', value: '1' },
          { lable: '选项2', value: '2' }
        ],
        onChange: v => {
          console.log('v: ', v)
        }
      },
      class: 'w-full'
    },
    {
      cType: 'checkbox',
      label: '多选框',
      prop: 'checkbox',
      config: {
        props: { label: 'lable' },
        showCheckAll: true,
        options: [
          { lable: '选项1', value: '1' },
          { lable: '选项2', value: '2' }
        ],
        onChange: v => {
          console.log('v: ', v)
        }
      },
      class: 'w-full'
    },
    {
      cType: 'select',
      label: '下拉选择-options',
      prop: 'select1',
      config: {
        clearable: true,
        props: { label: 'lable' },
        options: [
          { lable: '选项1', value: '1' },
          { lable: '选项2', value: '2' }
        ],
        onChange: v => {
          console.log('v: ', v)
        }
      },
      class: 'w-33'
    },
    {
      cType: 'select',
      label: '下拉选择-字典',
      prop: 'select2',
      config: {
        clearable: true,
        dict: 'dictName',
        props: { label: 'name', value: 'id', field: 'fieldName', storage: 'localStorage' },
        onChange: v => {
          console.log('v: ', v)
        }
      },
      class: 'w-33'
    },
    {
      cType: 'selectTree',
      label: '下拉选择-树',
      prop: 'selectTree',
      config: {
        clearable: true,
        nodeKey: 'value',
        showCheckbox: true,
        multiple: true,
        collapseTags: true,
        maxCollapseTags: 1,
        data: [
          {
            value: '1',
            label: 'Level one 1',
            children: [
              {
                value: '1-1',
                label: 'Level two 1-1',
                children: [
                  {
                    value: '1-1-1',
                    label: 'Level three 1-1-1'
                  }
                ]
              }
            ]
          },
          {
            value: '2',
            label: 'Level one 2',
            children: [
              {
                value: '2-1',
                label: 'Level two 2-1',
                children: [
                  {
                    value: '2-1-1',
                    label: 'Level three 2-1-1'
                  }
                ]
              },
              {
                value: '2-2',
                label: 'Level two 2-2',
                children: [
                  {
                    value: '2-2-1',
                    label: 'Level three 2-2-1'
                  }
                ]
              }
            ]
          }
        ],
        props: { label: 'label', value: 'value' },
        onChange: v => {
          console.log('v: ', v)
        }
      },
      class: 'w-33'
    },
    {
      cType: 'selectTable',
      label: '下拉选择-表格',
      prop: 'selectTable',
      text: 'selectTableText',
      config: {
        clearable: true,
        tableConfig: {
          multiple: true,
          rowKey: 'id',
          props: { label: 'name', value: 'id' },
          data: toRef(tableData, 'value'),
          columns: [
            { label: '多选', cType: 'checkbox', width: '90' },
            { label: '日期', prop: 'date', width: 120 },
            { label: '姓名', prop: 'name' },
            { label: 'id', prop: 'id' }
          ],
          pagination: toRefs(pagination.value)
        },
        onGetSelectRow: v => {
          console.log('v: ', v)
        },
        onCurrentChange: (val: number) => {
          pagination.value.currentPage = val
          tableData.value = allData.slice(
            (pagination.value.currentPage - 1) * pagination.value.pageSize,
            pagination.value.currentPage * pagination.value.pageSize
          )
        },
        onSizeChange: (val: number) => {
          pagination.value.pageSize = val
          tableData.value = allData.slice(
            (pagination.value.currentPage - 1) * val,
            pagination.value.currentPage * val
          )
        }
      },
      class: 'w-full'
    },
    { cType: 'date', label: '日期选择', prop: 'date1', class: 'w-33' },
    {
      cType: 'switch',
      label: '开关选择',
      prop: 'switch',
      class: 'w-33',
      config: { activeValue: '00', inactiveValue: '11' }
    }
  ])

  tableData.value = allData.slice(
    (pagination.value.currentPage - 1) * pagination.value.pageSize,
    pagination.value.currentPage * pagination.value.pageSize
  )

  const dFormRef = ref()
  const submit = async () => {
    const res = await dFormRef.value.validate()
  }
  const reset = () => {
    dFormRef.value.resetFields()
    formData.value.selectTableText = ''
    console.log(' dFormRef.value: ', dFormRef.value.resetFields)
  }
</script>
<style scoped lang="scss"></style>
<style>
  .flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .w-full {
    width: 100%;
  }
  .w-33 {
    width: 33%;
  }
</style>
